import React from 'react'
import {
    Form,
    Button,
    Upload,
    Input,
    message
} from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import { UserOutlined, LockOutlined } from '@ant-design/icons'

import { connect } from 'react-redux'
import { saveMusic } from '../../../store/actions'


const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
}
  
const normFile = e => {
    console.log('Upload event:', e)
    if (Array.isArray(e)) {
        return e
    }
    return e && e.fileList
}
function Index(props) {
    const onFinish = values => {
        console.log('Received values of form: ', values)
        // 点击了提交，获取到表单的所有数据
        /* eslint-disable */
        let data = {
            name: values.song,
            singer: values.singer,
            filename: values.upload[0].response.filename,
            url: values.upload[0].response.url,
        }
        props.saveMusic(data)
    }
    const uploadProps = {
        name: 'avatar',
        action: '/upload',
        headers: {
            authorization: localStorage.getItem('token'),
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList)
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`)
                
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`)
            }
        },
    }
    return (
        <Form
            name="validate_other"
            {...formItemLayout}
            onFinish={onFinish}
            initialValues={{
                ['input-number']: 3,
                ['checkbox-group']: ['A', 'B'],
                rate: 3.5,
            }}
        >
            <Form.Item
                name="singer"
                label="歌手"
                rules={[{ required: true, message: '请输入歌手名称' }]}
            >
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="歌手名称" />
            </Form.Item>
            <Form.Item
                name="song"
                label="歌名"
                rules={[{ required: true, message: '请输入歌名' }]}
            >
                <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="text"
                    placeholder="歌名"
                />
            </Form.Item>
        
            <Form.Item
                name="upload"
                label="Upload"
                valuePropName="fileList"
                getValueFromEvent={normFile}
                extra=""
            >
                <Upload {...uploadProps}>
                    <Button icon={<UploadOutlined />}>点击上传音乐</Button>
                </Upload>
            </Form.Item>
            <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
            </Form.Item>
        </Form>
    )
}
const mapStateToProps = () => {
    return {}
}
const mapDispatchToProps = (dispatch) => {
    return {
        saveMusic(fileList) {
            dispatch(saveMusic(fileList))
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Index)
